<script setup>
import { ref, computed, watch } from 'vue';
import { ArrowDown, Search  } from '@element-plus/icons-vue';
import {ElCheckboxGroup, ElCheckbox, ElMessage} from "element-plus";
import router from "@/router/index.js";
import { useRoute } from 'vue-router';
const route = useRoute();

// 筛选数据
const filters = ref([
  {
    label: '招聘种类',
    items: [
      '不限',
      '考核招聘事业编制教师',
      '考核招聘事业编制',
      '博士后招聘',
      '考核招聘实验教师2024'
    ],
    selected: ['不限'],
    expanded: false
  },
  {
    label: '招聘计划',
    items: [
      '不限',
      '珠峰引才',
      '博士后招聘',
      '考核招聘事业编制',
      '博士辅导员'
    ],
    selected: ['不限'],
    expanded: false
  },
  {
    label: '招聘单位',
    items: [
      '不限',
      '教学科研单位',
      '地球与行星科学学院',
      '油气与天然气工程学院',
      '计算机科学学院',
      '经济管理学院',
      '法学院',
      '体育学院',
      '理学院'
    ],
    selected: ['不限'],
    expanded: false
  }
]);

// 在复选框变化时处理逻辑
const handleCheckboxChange = (filter, item) => {
  // 处理"不限"选项的互斥逻辑
  if (item === '不限') {
    filter.selected = ['不限']
  } else {
    // 如果选择了其他选项，移除"不限"
    filter.selected = filter.selected.filter(
        selected => selected !== '不限'
    )
  }
}

// 表格数据
const tableData = ref(Array.from({length: 104}, (_, i) => ({
  id: i + 1,
  name: `岗位${i + 1}`,
  plan: '珠峰引才',
  type: '考核招聘事业编制教师',
  unit: '计算机科学学院',
  count: Math.ceil(Math.random() * 5),
  deadline: `2025-03-${String(31 - i%31).padStart(2, '0')} 23:59:59`
})));

// 不会因筛选变动的原的数据
const originalData = tableData.value;

// 获取当前所有筛选条件
const getSelectedFilters = () => {
  return filters.value.map(filter => ({
    label: filter.label,
    selected: filter.selected
  }))
}

let activeFilters = getSelectedFilters()

// 处理筛选按钮点击
const handleFilter = () => {
  activeFilters = getSelectedFilters();
  ElMessage.success('筛选成功')

  // 执行筛选逻辑
  applyFilters(activeFilters)
}

// 筛选方法
const applyFilters = (filters) => {
  tableData.value = originalData.filter(item => {
    return filters.every(filter => {
      switch (filter.label) {
        case '招聘种类':
          return filter.selected.includes('不限') ||
              filter.selected.includes(item.type)
        case '招聘计划':
          return filter.selected.includes('不限') ||
              filter.selected.includes(item.plan)
        case '招聘单位':
          return filter.selected.includes('不限') ||
              filter.selected.includes(item.unit)
        default:
          return true
      }
    })
  })
}

const searchText = ref('');

//点击搜索
function clickSearch() {
  applyFilters(activeFilters)
  tableData.value = tableData.value.filter(item => {
    return item.name.includes(searchText.value)
  })
  ElMessage.success('已展示对应的搜索结果')
}

watch(
    () => route.query.q,
    (newVal) => {
      if (newVal) {
        searchText.value = newVal;
        clickSearch();
      }
    },
    { immediate: true }
);

// 分页配置
const pageSize = 10;
const currentPage = ref(1);
const total = computed(() => tableData.value.length);

// 当前显示数据
const currentData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return tableData.value.slice(start, start + pageSize);
});

// 分页显示范围
const rangeStart = computed(() => (currentPage.value - 1) * pageSize + 1);
const rangeEnd = computed(() => Math.min(currentPage.value * pageSize, total.value));

// 切换展开状态
const toggleExpand = (filter) => {
  filter.expanded = !filter.expanded;
};

// 显示的可视项
const visibleItems = (filter) => {
  return filter.expanded ? filter.items : filter.items.slice(0, 5);
};

// 处理分页变化
const handlePageChange = (val) => {
  currentPage.value = val;
};

function navigateToDetail() {
  router.push('/index/jobDetail');
}

const handleApply = () => {
  router.push('/index/jobApply')
};
</script>

<template>
  <div class="container">
    <!-- 左侧筛选面板 -->
    <div class="left-panel">
      <el-input v-model="searchText" placeholder="请输入岗位名称搜索" suffix-icon="search" class="search-input">
        <template #suffix>
          <el-icon class="search-icon" @click="clickSearch"><search /></el-icon>
        </template>
      </el-input>

      <!-- 筛选条件 -->
      <div class="filter-group" v-for="(filter, index) in filters" :key="index">
        <div class="filter-header" @click="toggleExpand(filter)">
          <span class="title">{{ filter.label }}</span>
          <el-icon :class="['arrow', { 'rotate-180': filter.expanded }]">
            <ArrowDown />
          </el-icon>
        </div>

        <div class="filter-items">
          <el-checkbox-group v-model="filter.selected">
            <el-checkbox v-for="(item, i) in visibleItems(filter)" :key="i" :value="item" class="filter-item" @change="handleCheckboxChange(filter, item)">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <el-button style="width: 300px" @click="handleFilter">
        筛选
      </el-button>
    </div>

    <!-- 右侧表格面板 -->
    <div class="right-panel">
      <el-table :data="currentData" :row-style="() => ({ height: '67px' })">
        <el-table-column prop="name" label="岗位名称"/>
        <el-table-column prop="unit" label="招聘单位"/>
        <el-table-column prop="type" label="招聘种类"/>
        <el-table-column prop="count" label="拟招人数"/>
        <el-table-column prop="deadline" label="截止时间"/>
        <el-table-column label="操作">
          <template #default>
            <el-button type="primary" size="small" @click="handleApply">立即申请</el-button>
            <el-button type="info" size="small" @click="navigateToDetail">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handlePageChange"/>
        <div class="pagination-text">
          显示第 {{ rangeStart }} 至 {{ rangeEnd }} 项结果，共 {{ total }} 项
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 20px;
}

.left-panel {
  flex: 0 0 300px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.right-panel {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.search-input {
  margin-bottom: 20px;
}

:deep(.search-icon) {
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 8px;
  font-size: 18px;
  right: -32px;
}

:deep(.search-icon:hover) {
  color: #3b82f6;
  transform: scale(1.1);
}

:deep(.search-icon:active) {
  transform: scale(0.8);
}

.filter-group {
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.filter-header .title {
  font-weight: 600;
  color: #1e3a8a;
}

.arrow {
  margin-left: auto;
  transition: transform 0.3s;
}


.filter-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-item {
  width: 100%;
  margin-right: 0;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  width: 70%;
}

.pagination-text {
  color: #64748b;
  font-size: 14px;
}

/* 分页样式调整 */
:deep(.el-pagination) {
  padding: 0;
}

:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next),
:deep(.el-pagination.is-background .el-pager li) {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin: 0 4px;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background: #3b82f6;
  color: white;
}
</style>